import Taro, {Component} from '@tarojs/taro'
import {View, Text, Image} from '@tarojs/components'
import {getImagePathFromCloud} from '../../utils/utils'
import './index.scss'

export default class SwiperCard extends Component {
  constructor (props) {
    super(props)
    this.state = {
      imageUrl: null
    }
  }
  componentDidMount () {
    const {item} = this.props;
    if (item) {
      this.getImageFromCloud(item.img)
    }
  }

  getImageFromCloud = (fileId) => {
    getImagePathFromCloud(fileId).then((imageUrl) => {
      if (imageUrl) {
        this.setState({
          imageUrl: imageUrl
        })
      }
    });
  };

  render () {
    const {imageUrl} = this.state;
    if (imageUrl) {
      const sectionStyle = {
        height: '200px',
        backgroundImage: `url(${imageUrl})`
      };
      const {item} = this.props
      return (
        <View className='card'>
          <Image className='bg-image' src={this.state.imageUrl}/>
          <View className='topic'>{item.topic}</View>
          <View className='extra'>{item.extra}</View>
          <View className='total'>
            <Text className='person'>{item.totalPerson}</Text> 人参与，奖金池
            <Text className='money'>{item.totalMoney}</Text>元
          </View>
        </View>
      );
    }
    return null

  }
}
